<!-- 线上课程组件 -->
<template>
  <view class="item-card" @click="onCourseDetail(data)">
    <view class="flex-shrink-0 relative w-240 h-160 mr-3">
      <view class="tag-num">共{{ data.curriculum?.chapters_num }}讲</view>
      <u-image width="100%" height="100%" border-radius="12" :src="data.curriculum?.cover_image" />
    </view>
    <view class="flex-1 flex flex-col justify-between text-single">
      <view class="c-#333 text-28 font-bold text-single">{{ data.curriculum?.class_name }}</view>
      <view>
        <view class="c-#B5B5B5 text-24">{{ data.curriculum?.desc }}</view>
        <view class="flex items-center mt-1">
          <view class="flex-1 flex items-center text-single">
            <u-image width="32" height="32" shape="circle" :src="data.curriculum?.teacher_image" />
            <view class="ml-1 c-#999 text-26 text-single">{{ data.curriculum?.teacher_name }}</view>
          </view>
          <view class="flex-shrink-0 flex items-center">
            <image class="w-24 h-26" src="/static/images/user/ic_play.png"></image>
            <view class="ml-1 c-#666 text-24">已学{{ data.progress || 0 }}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { navigate, showToast } from '@/common/util/uni'

function onCourseDetail (data) {
  if (!data.curriculum?.status) {
    showToast('该课程已下架', 'none')
    return
  }
  navigate(`/package_square/pages/course/detail?id=${data.class_id}`)
}

defineProps({
  data: Object
})
</script>

<style lang='scss' scoped>
.tag-num {
  min-width: 100rpx;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  border-radius: 12rpx 0rpx 12rpx 0rpx;
  background-color: rgba(244, 175, 34, .75);
  padding: 4rpx 20rpx;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
}

.item-card {
  display: flex;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
